import { motion } from "motion/react";

export function TypingIndicator() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.8 }}
      animate={{ opacity: 1, scale: 1 }}
      className="bg-white dark:bg-slate-800 rounded-2xl px-3 py-2 md:px-4 md:py-3 shadow-sm border border-slate-200 dark:border-slate-700"
    >
      <div className="flex items-center space-x-1 md:space-x-2">
        <span className="text-xs md:text-sm text-slate-500 dark:text-slate-400 mr-1 md:mr-2">正在输入</span>
        <div className="flex space-x-0.5 md:space-x-1">
          {[0, 1, 2].map((index) => (
            <motion.div
              key={index}
              className="w-1.5 h-1.5 md:w-2 md:h-2 bg-blue-500 rounded-full"
              animate={{
                y: [0, -6, 0],
                opacity: [0.4, 1, 0.4],
              }}
              transition={{
                duration: 1.4,
                repeat: Infinity,
                delay: index * 0.2,
                ease: "easeInOut",
              }}
            />
          ))}
        </div>
      </div>
    </motion.div>
  );
}
